<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>填写订单</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="css/suistyle.css">
</head>
<body>
<div class="page-group">
    <div class="page page-current">
        <!-- 你的html代码 -->
        <div class="content">
            <div class="list-block">
                <ul>
                    <li class="item-content head1">
                        <h1 class="head">良诸暨君澜酒店纳斯比法式餐厅</h1>
                    </li>
                    <li class="item-content item-link">
                        <div class="item-media"><i class="icon icon-f7"></i></div>
                        <div class="item-inner" id="DateTime">
                            <div class="item-title">日期和时间</div>
                            <div class="item-after"><input type="text" id='datetime-picker' class="datatime"/></div>
                        </div>
                    </li>
                    <li class="item-content ">
                        <div class="item-media"><i class="icon icon-f7"></i></div>
                        <div class="item-inner">
                            <span>就餐人数</span>
                            <div class="rt">
                                <a href="javascript:;" class="btn_sub"><img src="img/btn_sub.gif" alt="" width=32 height=32/></a>
                                <span class="number">1</span>
                                <a href="javascript:;" class="btn_add"><img src="img/btn_add.gif" alt="" width=32 height=32/></a>
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-link">
                        <div class="item-media"><i class="icon icon-f7"></i></div>
                        <div class="item-inner">
                            <div class="item-title">餐桌类型</div>
                            <div class="item-after"><input type="text" id='picker'/></div>
                        </div>
                    </li>
                    <li class="item-content linkman">
                        <p class="linkmanp"><img src="img/line_left.gif" width=65 height=7 alt=""/><span>联系人信息</span><img src="img/line_right.gif" width=65 height=7 alt=""/></p>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-name"></i></div>
                            <div class="item-inner">
                                <div class="item-input">
                                    <input type="text" placeholder="Your name">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-text"></i></div>
                            <div class="item-inner">
                                <div class="item-input">
                                    <input type="text" placeholder="phone">
                                </div>
                            </div>
                        </div>
                    </li>


                </ul>
                <div class="alertText">
                    <h4><img  src="img/icon_tips.png" alt=""/>温馨提示</h4>
                    <p>
                        日期时间可"暂不选择"，您可直接购买后任意时间到店消费，只需要出示预定号即可，但如遇高峰时间您可能需要等位（建议去之前提前致电询问）
                    </p>
                    <p>
                        不营业期间，节假日等特殊注明的情况除外
                    </p>
                </div>


            </div>

        </div>
        <nav class="bar bar-tab">
            <a href="#" class="button button-big" id="submit">提交订单</a>
        </nav>


    </div>
</div>

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src="js/sm.js" charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script>$.init()</script>

<script>
        $("#datetime-picker").datetimePicker({
            value: ['', '', '', '', '']
        });
</script>
<script>
    $("#picker").picker({
        toolbarTemplate: '<header class="bar bar-nav">\
  <button class="button button-link pull-left"></button>\
  <button class="button button-link pull-right close-picker">确定</button>\
  <h1 class="title">餐桌类型</h1>\
  </header>',
        cols: [
            {
                textAlign: 'center',
                values: ['1-4人桌', '4-6人桌', '6-10人桌', '包厢']
            }
        ]
    });
</script>
<script>
    $('#submit').click(function(){
        $('.page').append('<div class="dwo" style="background:#313131;opacity: 0.8"><p style="position: absolute;top:50%;left: 50%;color:#fff;font-size: 0.9rem;padding:0.75rem 1.5rem;background: #000;margin-left: -3.6rem;margin-top: -1.425rem">订单修改成功</p></div>')
    })
    $('.btn_sub').click(function(){
        var a= $(this).next().html();
        if(a>=1){
            $(this).next().html(a-1);
        }else{
            $(this).next().html();
        }
    })
    $('.btn_add').click(function(){
        var a = $(this).prev().html();
        $(this).prev().html(a-0+1);
    })
</script>

</body>
</html>